<template>
	<div class="conter">
		<ul>
			<li v-for="data in lis">
				<a href="#" title="">{{data.text}}</a>
			</li>
		</ul>
	</div>
</template>
<script>
export default {
  name: 'conter',
  data () {
    return {
      lis: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
      ]
    }
  }
}
</script>
<style scoped>
	.conter{
		width: 100%;
		height: auto;
	}
	.conter>ul{
		width: 100%;
	}
	.conter>ul>li{
		width: 100%;
		padding: 15px 5px;
		background-color: #e2e2e2;
		transition: background-color 0.5s;
		margin-bottom: 3px;
	}
	.conter>ul>li:hover{
		background-color:#c5c5c5;
	}
</style>
